<template>
  <div class="main">
    <div class="main-warpper">
      <div class="bread-crumb">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">我的好茶仓</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/user' }">个人中心</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/user/afterSales' }">售后管理</el-breadcrumb-item>
          <el-breadcrumb-item>查看详情</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="main-content-first">
        <div class="sale-detail">
          <p class="title">服务单信息</p>
          <div class="after-sale-list">
            <div><span>服务编号</span><p>{{aftersaleList.saleafterId}}</p></div>
            <div><span>售后原因</span><p>{{afterSaleCause.Types[aftersaleList.saleafterCause + '']}}</p></div>
            <div><span>货物状态</span><p>{{goodsStatus.Types[aftersaleList.goodsStatus]}}</p></div>
            <div><span>售后类型</span><p>{{saleafterType.Types[aftersaleList.saleafterType]}}</p></div>
            <div><span>退款金额</span><p>{{aftersaleList.refundPrice}}</p></div>
            <div><span>退款说明</span><p class="refundExplain">{{aftersaleList.refundExplain}}</p></div>
            <div><span>收货地址</span><p>{{areaName}}{{afteraddress.address}}</p></div>
            <div><span>联系信息</span><p>{{afteraddress.name}}{{afteraddress.mobile}}</p></div>
          </div>
        </div>
        <div class="product-detail">
          <p class="title">商品信息</p>
          <div class="after-sale-product">
            <div class="product-img"><img :src="aftersaleList.productCover" width="100%" height="100%"></div>
            <div class="product-name">
              <p>{{aftersaleList.name}}</p>
              <p>规格：{{aftersaleList.attributeName}}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="main-conten-second">
        <p class="title">售后进度</p>
        <div class="second-content">
          <div class="second-left">
            <p>当前状态：<span>{{afterSaleTypes.Types[aftersaleList.orderStatus]}}</span></p>
            <p class="explain">（您的申请已提交，请等待好茶仓平台审核。3---5个工作日后即可看到审核结果。如有疑问可致电客服：18682219287.）</p>
            <p>
              <el-button v-if="aftersaleList.orderStatus === 1" @click="apply">修改申请</el-button>
              <el-button type="primary" @click="closeApply" v-if="aftersaleList.orderStatus === 1">取消申请</el-button>
              <el-button type="primary" v-if="aftersaleList.pcIsReturn === 0" @click="affirmShipping">填写运单</el-button>
            </p>
          </div>
          <div class="second-right">
            <img v-if="aftersaleList.orderStatus === 1 || aftersaleList.orderStatus === 2" src="../../assets/images/rate01.png"/>
            <img v-if="aftersaleList.orderStatus === 3 || aftersaleList.orderStatus === 4" src="../../assets/images/rate02.png"/>
            <img v-if="aftersaleList.orderStatus === 5" src="../../assets/images/rate03.png"/>
            <!-- <img :src="rateUrl"/> -->
            <p class="steps" v-if="aftersaleList.saleafterType === 0">
              <span class="active">提交审核</span>
              <span :class="{'active': isActive01 || isActive02 || isActive03 }">平台审核</span>
              <!-- <span v-if="aftersaleList.orderStatus === 4" :class="{'active': isActive02 || isActive03}">货品返仓</span> -->
              <span :class="{'active': isActive02 || isActive03}">退款中</span>
              <span :class="{'active': isActive03}">完成</span>
            </p>
            <p class="steps" v-else>
              <span class="active">提交审核</span>
              <span :class="{'active': isActive01 || isActive02 || isActive03 }">平台审核</span>
              <span :class="{'active': isActive02 || isActive03}">货品返仓</span>
              <!-- <span v-if="aftersaleList.orderStatus === 3" :class="{'active': isActive02 || isActive03}">退款中</span> -->
              <span :class="{'active': isActive03}">完成</span>
            </p>
          </div>
        </div>
      </div>
      <div class="main-conten-third">
        <div class="track-list" v-for="(item, index) in trackRate" :key="index">
          <div class="circle">
            <div class="cricle-icon"></div>
            <div class="shu-icon"></div>
          </div>
          <div class="track-rate">
            <p>{{item.storeName}}</p>
            <p>{{item.updateTime}}</p>
            <p class="rate">{{item.rate}}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 填写运单 -->
    <el-dialog
      title="请填写运单"
      :visible.sync="dialogSample"
      width="600px"
      top="38vh">
      <div class="sample-content" v-if="aftersaleList.gysAddress">
        <p><span>供货商地址</span>{{gysareaName}}{{aftersaleList.gysAddress.address}}</p>
        <p><span>收货人</span>{{aftersaleList.gysAddress.name}}</p>
        <p><span>联系电话</span>{{aftersaleList.gysAddress.mobile}}</p>
        <p>
          <span>物流公司</span>
           <!-- <el-select placeholder="请选择物流公司"  v-model="expressage" clearable filterable size="small">
            <el-option v-for="(item,index) in logisticsData"
              :key="index"
              :label="item.logisticsName"
              :value="item.logisticsId">
            </el-option>
          </el-select> -->
          <el-select
                size="small"
                v-model="expressage"
                filterable
                remote
                placeholder="请选择快递公司"
                :remote-method="remotePost"
                @focus="getLogistics">
                <el-option
                  v-for="(item, index) in logisticsData"
                  :key="index"
                  :label="item.logisticsName"
                  :value="item.logisticsId">
                </el-option>
              </el-select>
        </p>
        <p>
          <span>物流单号</span>
          <el-input v-model="shippingNum" placeholder="请输入物流单号" clearable size="small"></el-input>
        </p>
      </div>
      <span class="dialog-footer">
        <el-button type="primary" size="small" @click="sureSample">确 定</el-button>
        <el-button size="small" @click="cancelSample">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {afterSaleCause, goodsStatus, saleafterType, afterSaleTypes} from '@/util/enums'
import { getAreaName } from '@/util/getAreaName'
export default {
  data () {
    return {
      isActive01: false,
      isActive02: false,
      isActive03: false, // 进度条字体颜色显示
      aftersaleList: {},
      afteraddress: [], // 地址
      // rateUrl: '', // 进度条图片显示
      trackRate: [], // 进度跟踪
      logisticsData: [], // 物流公司
      areaName: '',
      gysareaName: '',
      afterSaleCause: afterSaleCause, // 售后原因
      goodsStatus: goodsStatus, // 是否收到货
      saleafterType: saleafterType, // 售后类型
      afterSaleTypes: afterSaleTypes, // 售后状态
      dialogSample: false, // 填写运单弹框
      expressage: '', // 物流公司
      shippingNum: '' // 物流单号
    }
  },
  mounted () {
    this.getData()
    this.getTrackRate()
  },
  methods: {
    getData () {
      this.$http.post(this.$api + '/pc/orderSaleafter/getSaleafterDetail', {
        saleafterId: this.$route.query.saleafterId
      }).then(res => {
        if (res.responseCode === '0000') {
          this.aftersaleList = res.data
          this.afteraddress = this.aftersaleList.address
          // 地址
          let area = []
          if (res.data.address.province) {
            area.push(res.data.address.province + '')
            if (res.data.address.city) {
              area.push(res.data.address.city + '')
              if (res.data.address.district) {
                area.push(res.data.address.district + '')
              }
            }
          }
          this.areaName = getAreaName(area)
          // 供应商地址
          let gysarea = []
          if (res.data.gysAddress.province) {
            gysarea.push(res.data.gysAddress.province + '')
            if (res.data.gysAddress.city) {
              gysarea.push(res.data.gysAddress.city + '')
              if (res.data.gysAddress.district) {
                gysarea.push(res.data.gysAddress.district + '')
              }
            }
          }
          this.gysareaName = getAreaName(gysarea)
        }
      })
    },
    // 取消申请
    closeApply () {
      this.$http.post(this.$api + '/pc/orderSaleafter/closeApply', {
        saleafterId: this.$route.query.saleafterId
      }).then(res => {
        if (res.responseCode === '0000') {
          this.getData()
          this.$message.success({
            message: res.responseMsg
          })
        }
      })
    },
    // 进度跟踪
    getTrackRate () {
      this.$http.post(this.$api + '/pc/orderSaleafter/getTrackRate', {
        saleafterId: this.$route.query.saleafterId
      }).then(res => {
        if (res.responseCode === '0000') {
          this.trackRate = res.data.tractRate
        }
      })
    },
    // 修改申请
    apply () {
      this.$router.push('/user/applyAfterSales?saleafterId=' + this.$route.query.saleafterId)
    },
    // 填写运单
    affirmShipping () {
      this.dialogSample = true
      this.getLogistics()
    },
    // 物流公司
    // getLogistics () {
    //   this.$http.post(this.$api + '/pc/orderSaleafter/getLogistics', {
    //     shippingName: this.expressage || ''
    //   }).then(res => {
    //     if (res.responseCode === '0000') {
    //       this.logisticsData = res.data
    //     }
    //   })
    // },
    // 快递
    getLogistics () {
      let params = {
        'shippingName': this.expressage
      }
      this.$http.post(this.$api + '/pc/orderSaleafter/getLogistics', params).then(res => {
        if (res.responseCode === '0000') {
          this.logisticsData = res.data
        } else {
          this.$message.error({
            message: res.responseMsg
          })
        }
      }).catch(() => {
        this.$message.error({
          message: '请求超时！'
        })
      })
    },
    // 远程搜索店铺
    remotePost (query) {
      if (query !== '') {
        this.loading = true
        this.$http.post(this.$api + '/pc/orderSaleafter/getLogistics', {
          'shippingName': query || ''
        }).then(res => {
          if (res.responseCode === '0000') {
            this.logisticsData = res.data
          } else {
            this.$message.error({
              message: res.responseMsg
            })
          }
        })
        this.loading = false
      } else {
        this.logisticsData = []
      }
    },
    // 提交物流单
    sureSample () {
      if (this.shippingNum && this.expressage) {
        this.$http.post(this.$api + '/pc/orderSaleafter/affirmShipping', {
          saleafterId: this.$route.query.saleafterId,
          shippingNum: this.shippingNum,
          wlId: this.expressage
        }).then(res => {
          if (res.responseCode === '0000') {
            this.dialogSample = false
            this.$message.success({
              message: res.responseMsg
            })
            this.getData()
          } else {
            this.$message.error({
              message: res.responseMsg
            })
          }
        })
      } else {
        this.$message.error({
          message: '请填写物流信息'
        })
      }
    },
    cancelSample () {
      this.dialogSample = false
      this.shippingNum = ''
      this.expressage = ''
    }
  },
  watch: {
    'aftersaleList.orderStatus': function (val) {
      if (val === 1 || val === 2) {
      } else if (val === 3 || val === 4) {
        this.isActive01 = true
        this.isActive02 = true
      } else {
        this.isActive03 = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/basic.scss';
  .main{
    width: 100%;
    .main-warpper{
      width: 1200px;
      margin: 20px auto;
      .bread-crumb{
        margin-bottom: 20px;
      }
      .title{
        color: $f_bray;
        margin-bottom: 25px;
      }
      .main-content-first{
        border: 1px solid $border_color;
        background: #fff;
        padding: 0 25px;
        display: flex;
        font-size: $fz_14;
        margin-bottom: 30px;
        .sale-detail{
          width: 638px;
          padding: 25px 107px 35px 0;
          border-right: 1px solid $border_color;
          color: $f_main;
          .after-sale-list{
            width: 530px;
            border: 1px solid $border_color;
            background: $bg_title;
            div{
              width: 530px;
              border-bottom: 1px solid $border_color;
              min-height: 40px;
              line-height: 40px;
              display: flex;
              span{
                display: inline-block;
                width: 138px;
                border-right: 1px solid $border_color;
                text-align: center;
                margin-right: 25px;
              }
              p {
                width: 392px;
                word-wrap: break-word;
                word-break: break-all;
              }
            }
            div:last-child{
              border-bottom: 0;
            }
          }
        }
        .product-detail{
          width: 560px;
          padding: 25px 35px 0 25px;
          .after-sale-product{
            border:1px solid $border_color;
            height: 182px;
            background: $bg_title;
            display: flex;
            .product-img{
              width: 138px;
              height: 138px;
              border:1px solid $border_color;
              margin: 25px 20px 0 25px;
            }
            .product-name{
              margin-top: 35px;
              height: 40px;
              p:first-child{
                margin-bottom: 25px;
              }
            }
          }
        }
      }
      .main-conten-second{
        border: 1px solid $border_color;
        background: #fff;
        margin-bottom: 30px;
        padding: 25px;
        font-size: $fz_14;
        .title{margin-bottom: 30px;}
        .second-content{
          display: flex;
          .second-left{
            width: 420px;
            margin-right: 86px;
            span{
              color: $red_d;
            }
            .explain{
              color: $f_normal;
              margin: 12px 0 20px;
            }
          }
          .second-right{
            padding-top: 20px;
            .steps{
              margin-top: 15px;
              display: flex;
              justify-content: space-around;
              color: $f_normal;
              width: 494px;
              .active{
                color: $green;
              }
            }
          }
        }
      }
      .main-conten-third{
        border: 1px solid $border_color;
        background: #fff;
        margin-bottom: 30px;
        padding: 40px 0 50px 48px;
        .track-list{
          display: flex;
          .circle {
            height: 88px;
            margin-right: 45px;
            .cricle-icon{
              width: 13px;
              height: 13px;
              border-radius: 50%;
              background: $bg_circle;
            }
            .shu-icon{
              height: 82px;
              background: $bg_circle;
              width: 3px;
              margin:  0 auto;
            }
          }
          .track-rate{
            width: 749px;
            border-bottom: 1px dashed $border_color;
            margin-bottom: 15px;
            color: $f_normal;
            font-size: $fz_14;
            p:nth-child(2) {
              margin: 8px 0;
            }
            .rate {
              margin-bottom: 15px;
              color: $f_main;
            }
          }
        }
      }
      .main-conten-third div:first-child {
        .circle {
          .cricle-icon{
            width: 22px;
            height: 22px;
            background: url(../../assets/images/icon-circle.png) no-repeat;
            margin-left: -4px;
          }
          .shu-icon{
            height: 74px;
            background: $bg_circle;
            width: 3px;
            margin-left: 5px;
          }
        }
        .track-rate {
          .rate {
            color: $red_d;
          }
        }
      }
    }
  }
  .el-dialog__header .el-dialog__title{
    font-weight: bold;
  }
  .sample-content{
    font-size: $fz_14;
    p{
      margin-bottom: 16px;
      padding-left: 10px;
      span {
        display: inline-block;
        width: 82px;
      }
    }
  }
  // .dialog-footer .el-button--primary{
  //   width: 250px;
  //   margin-left: 85px;
  //   height: 35px;
  // }
  .el-dialog .el-dialog__header {
    font-weight: bold;
  }
  .el-input{
    width: 215px;
  }
</style>
